<!-- 机构端-招聘人才-人才简历 -->
<template>
	<view class="resume-container">
		<!-- 用户基本信息 -->
		<view class="user-info">
			<view class="info-main">
				<view class="name-line">
					<text class="name">{{base_info.base.name}}</text>
					<text class="gender" @click="personInfo">编辑</text>
				</view>
				<view class="meta-info">
					<text class="gender">{{base_info.base.sex}}</text>
					<text>|</text>
					<text>{{base_info.base.birth}}</text>
					<text>|</text>
					<text>{{base_info.base.xueli}}</text>
					<text>|</text>
					<text>{{base_info.base.workindate ? base_info.base.workindate : ''}}</text>
				</view>
				<view class="contact-info">
					<u-icon name="phone"></u-icon>
					<text class="phone">{{base_info.base.phoneno}}</text>

					<u-icon name="weixin-fill"></u-icon>
					<text class="weixin">{{base_info.base.wxopenid}}</text>
				</view>
			</view>
			<view class="avatar-container">
				<!-- <image src="/static/default-avatar.png" class="avatar" mode="aspectFill"></image> -->
				<image :src="base_info.base.header_img ? base_info.base.header_img : avatarUrl" class="avatar" mode="aspectFill"></image> 
			</view>
		</view>

		<!-- 分隔线 -->
		<u-line color="#c1c3c7" length="90%" margin="0 10px"></u-line>

		<!-- 求职意向 -->
		<view class="section">
			<view class="section-header">
				<text class="title">求职意向</text>
				<text class="status" @click="purpose">编辑</text>
			</view>
			<view class="section-content">
				<view class="intention-item">
					<text class="label">期望职位：</text>
					<text>{{qwzw}}</text>
				</view>
				<view class="intention-item">
					<text class="label">工作地点：</text>
					<text>{{workLocation}}</text>
				</view>
				<view class="intention-item">
					<text class="label">求职状态：</text>
					<text>{{base_info.qz.jlqz_qiuzstate}}</text>
				</view>
				<view class="intention-item">
					<text class="label">期望薪资：</text>
					<text>{{base_info.qz.jlqz_xzyq}}</text>
				</view>
			</view>
		</view>

		<!-- 分隔线 -->
		<u-line color="#c1c3c7" length="90%" margin="0 10px"></u-line>

		<!-- 个人介绍 -->
		<view class="section">
			<view class="section-header">
				<text class="title">个人介绍</text>
				<text class="status" @click="introduce">编辑</text>
			</view>
			<view class="section-content">
				<!-- 加载更多 -->
				<u-read-more :show-height="200" :toggle="true" :shadow-style="shadowStyle" color="#03B8CD">
					<rich-text :nodes="base_info.personal.jlbi_personview"></rich-text>
				</u-read-more>
			</view>
		</view>

		<!-- 分隔线 -->
		<u-line color="#c1c3c7" length="90%" margin="0 10px"></u-line>

		<!-- 职业证书 -->
		<view class="section">
			<view class="section-header">
				<text class="title">职业证书</text>
				<text class="status" @click="certificate">编辑</text>
			</view>
			<view class="certificates"  v-for="(item,index) in base_info.zyzs" :key="index">
				<view class="cert-names">
					<text class="cert-name">{{item.jlzs_name}}({{item.jlzs_level}})</text>
					<!-- <text class="cert-name">XXXXXX 等级证书（A级）</text> -->
				</view>
			</view>
		</view>

		<!-- 分隔线 -->
		<u-line color="#c1c3c7" length="90%" margin="0 10px"></u-line>

		<!-- 工作经历 -->
		<view class="section">
			<view class="section-header">
				<text class="title">工作经历</text>
				<text class="status" @click="workExperience">添加</text>
			</view>
			<view class="section-content" v-for="(item,index) in base_info.gzjl" :key="item.jlgz_code">
				<view class="workSection">
					<text class="title">{{item.jlgz_gongsiname}}</text>
					<text class="status" @click="jlgzEditor(item.jlgz_code)">编辑></text>
				</view>
				<view class="timeSection">
					<text class="title-name">{{item.jlgz_zhiweiname}}</text>
					<text class="title-time">{{item.jlgz_indate}}~{{item.jlgz_outdate}}</text>
				</view>
				<!-- 加载更多 -->
				<u-read-more :show-height="200" :toggle="true" :shadow-style="shadowStyle" color="#03B8CD">
					<rich-text :nodes="item.jlgz_workdetail"></rich-text>
				</u-read-more>
			</view>
		</view>

		<!-- 分隔线 -->
		<u-line color="#c1c3c7" length="90%" margin="0 10px"></u-line>

		<!-- 行业荣誉 -->
		<view class="section" >
			<view class="section-header">
				<text class="title">行业荣誉</text>
				<text class="status" @click="workHonor">添加</text>
			</view>
			<view class="section-content" v-for="(item,index) in base_info.hyry" :key="item.jlry_code">
				<view class="workSection">
					<text class="title">{{item.jlry_name}}</text>
					<text class="status" @click="jlryEditor(item.jlry_code)">编辑></text>
				</view>
				<view class="timeSection">
					<text class="title-name">{{item.jlry_mingci}}</text>
					<text class="title-time">{{item.jlry_getdate}}</text>
				</view>
				<!-- 加载更多 -->
				<u-read-more :show-height="200" :toggle="true" :shadow-style="shadowStyle" color="#03B8CD">
					<rich-text :nodes="item.jlry_desc"></rich-text>
				</u-read-more>
			</view>
		</view>

		<!-- 分隔线 -->
		<u-line color="#c1c3c7" length="90%" margin="0 10px"></u-line>
		<!-- 教育经历 -->
		<view class="section" >
			<view class="section-header">
				<text class="title">教育经历</text>
				<text class="status" @click="education">添加</text>
			</view>
			<view class="section-content" v-for="(item,index) in base_info.jyjl" :key="item.jljy_code">
				<view class="workSection">
					<text class="title">{{item.jljy_school}}</text>
					<text class="status" @click="jljyEditor(item.jljy_code)">编辑></text>
				</view>
				<view class="timeSection">
					<text class="title-name">{{item.jljy_zhuanye}}</text>
					<text class="title-time">{{item.jljy_indate}}-{{item.jljy_outdate}}</text>
					
				</view>
			</view>
		</view>

		<!-- 分隔线 -->
		<u-line color="#c1c3c7" length="90%" margin="0 10px"></u-line>

		<!-- 培训经历 -->
		<view class="section" >
			<view class="section-header">
				<text class="title">培训经历</text>
				<text class="status" @click="trainingClass">添加</text>
			</view>
			<view class="section-content" v-for="(item,index) in base_info.pxjl" :key="item.jlpx_code">
				<view class="workSection">
					<text class="title">{{item.jlpx_school}}</text>
					<text class="status" @click="jlpxEditor(item.jlpx_code)">编辑></text>
				</view>
				<view class="timeSection">
					<text class="title-name">{{item.jlpx_zhuanye}}</text>
					<text class="title-time">{{item.jlpx_traindate}}</text>
				</view>
			</view>
		</view>

		<!-- 分隔线 -->
		<u-line color="#c1c3c7" length="90%" margin="0 10px"></u-line>

		<!-- 空块 -->
		<view class="section">
			<view class="section-header">
				<text class="title"></text>
			</view>
			<view class="section-content">
				<view class="workSection">
					<!-- 	<text class="title"></text>		 -->
				</view>
				<view class="timeSection">
					<!-- 					<text class="title-name"></text>
					<text class="title-time"></text> -->
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
<!-- 		<view class="button-group">
			<u-button type="default" @click="saveDraft" shape="circle" :custom-style="customStyleObject">
				不合适
			</u-button>
			<u-button type="primary" @click="publishJob" shape="circle">
				邀请面试
			</u-button>
		</view> -->
	</view>
</template>

<script>
		import util from '@/utils/util.js'
	export default {
		data() {
			return {
				avatarUrl: '/static/img_yonghu.png',
				// 按钮组中的样式写法
				customStyleObject: {
					marginRight: '20rpx',
					// margin-right: 20rpx;

				},
				shadowStyle: {
					backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #F1F7F7 80%)",
					paddingTop: "300rpx",
					marginTop: "-300rpx",
					
				},
				expanded: false, // 控制个人介绍是否展开
				// 弹窗
				// 弹出窗口内容
				show: false,
				mode: "selector",
				range: ['康养师', '护理师', '健康顾问', '康复治疗师', '营养师'],
				NumberValue: 0,
				// field控件的样式
				placeholderStyle: "color:#bcbcbc",
				required: true,


				showInvitePopup: false,
				form: {
					position: '',
					interviewTime: '',
					address: '',
					contactPerson: '',
					contactPhone: ''
				},
				cyUserCode:'',
				base_info:{
					base:{
						name:'',
						sex:'',
						birth: '',
						xueli: '',
						workindate: '',
						phoneno: '',
						wxopenid: '',
						header_img: '', ///头像url
						header_imguri: ''  ///头像code
					},
					qz:{
						
					},
					// 个人介绍
					personal:{
						jlbi_personview: ''
					},
					zyzs: [],
					gzjl: [],
					hyry: [],
					jyjl: [],
					pxjl: []	
				},
			}
		},
		computed: {
		  workLocation() {
		    if (!this.base_info.qz || !this.base_info.qz.jlqz_workcity) {
		      return '暂无';
		    }
		    return this.base_info.qz.jlqz_workcity.join('、');
		  },
			qwzw() {
			  if (!this.base_info.qz || !this.base_info.qz.jlqz_qwzw) {
			    return '暂无';
			  }
			  return this.base_info.qz.jlqz_qwzw.join('、');
			}
		},
		// 打开页面，先获取个人简历信息
		// 打开时传入从业者的usercode
		onLoad(options) {
			this.cyUserCode = options.usercode
			if(!this.cyUserCode) {
				this.cyUserCode = uni.getStorageSync('usercode')
			}
			console.log('传入的usercode:', this.cyUserCode);			
		},
		onShow() {
			this.$u.api.queryjlfull({
				usercode : this.cyUserCode
			}).then(res =>{
				console.log('个人简历：', res)
				let baseInfo = res.data.base_info
				// 赋值个人信息
				this.base_info.base.name = baseInfo.base.jlbi_name;
				this.base_info.base.sex = baseInfo.base.jlbi_sex;
				this.base_info.base.birth = baseInfo.base.jlbi_birth;
				this.base_info.base.xueli = baseInfo.base.jlbi_xueli;
				// 工作年限需要计算
				const diff = util.calculateDateDifference(baseInfo.base.jlbi_workindate);
				console.log('work:', diff)
				if (diff.years == 0){
					this.base_info.base.workindate = diff.months+'个月';
				} else 	if(diff.months == 0){
					this.base_info.base.workindate = diff.years+'年';
				} else if(Number.isNaN(diff.years) && Number.isNaN(diff.months) ) {
					this.base_info.base.workindate = ''
				}	else  {
					this.base_info.base.workindate = diff.years+'年'+diff.months+'个月';
				}				
				this.base_info.base.phoneno = baseInfo.base.jlbi_phoneno;
				this.base_info.base.wxopenid = baseInfo.base.jlbi_wxopenid;
				this.base_info.base.header_img = baseInfo.base.header_img_uri[0].url;
				this.base_info.base.header_imguri = baseInfo.base.header_img_uri[0].imguri
				// 求职意向
				this.base_info.qz = baseInfo.qz;
				// 个人介绍
				this.base_info.personal.jlbi_personview = baseInfo.personal.jlbi_personview;
				// 职业证书
				this.base_info.zyzs = baseInfo.zyzs;
				// 工作经历
				this.base_info.gzjl = baseInfo.gzjl;
				// 行业荣誉
				this.base_info.hyry = baseInfo.hyry;
				// 教育经历
				this.base_info.jyjl = baseInfo.jyjl;
				// 培训经历
				this.base_info.pxjl = baseInfo.pxjl;			
				
			})
		},
		onBackPress() {
			// 点击左上角返回按钮时触发
			uni.navigateTo({
				url: '/pages/Practitioner/mine/mine'  // 指定跳转目标
			});
			return true; // 阻止默认返回行为
		},
		methods: {
			// 个人信息编辑
			personInfo() {
				uni.navigateTo({
					url: '/pages/Practitioner/personMesume/personInfo'
				});				
			},
			// 求职意向
			purpose() {
				uni.navigateTo({
					url: '/pages/Practitioner/personMesume/purpose'
				});	
			},
			// 个人介绍与优势
			introduce() {
				uni.navigateTo({
					url: '/pages/Practitioner/personMesume/introduce'
				});	
			},
			
			// 职业证书
			certificate() {
				uni.navigateTo({
					url: '/pages/Practitioner/personMesume/certificate'
				});	
			},
			
			// 工作经历添加
			workExperience() {
				uni.navigateTo({
					url: '/pages/Practitioner/personMesume/workExperience'
				});	
			},
			
			//工作经历编辑
			jlgzEditor(code) {
				uni.navigateTo({
					url: `/pages/Practitioner/personMesume/workExperience?code=${code}`
				});	
			},
			
			// 行业荣誉
			workHonor() {
				uni.navigateTo({
					url: '/pages/Practitioner/personMesume/workHonor'
				});	
			},
			
			// 行业荣誉编辑
			jlryEditor(code) {
				uni.navigateTo({
					url: `/pages/Practitioner/personMesume/workHonor?code=${code}`
				});	
			},
			
			// 教育经历
			education() {
				uni.navigateTo({
					url: '/pages/Practitioner/personMesume/education'
				});	
			},
			
			// 教育经历编辑
			jljyEditor(code) {
				uni.navigateTo({
					url: `/pages/Practitioner/personMesume/education?code=${code}`
				});	
			},
			
			
			// 培训经历
			trainingClass() {
				uni.navigateTo({
					url: '/pages/Practitioner/personMesume/trainingClass'
				});	
			},	
					
			// 培训经历编写
			 jlpxEditor(code) {
				 uni.navigateTo({
				 	url: `/pages/Practitioner/personMesume/trainingClass?code=${code}`
				 });	
			 },
			 // 上一步
			 // handlePrev() {
			 // 	// uni.navigateBack();
			 // 	uni.navigateTo({
			 // 		url: '/pages/Practitioner/mine/mine'
			 // 	});
			 // }

		}
	}
</script>

<style lang="scss" scoped>
	.resume-container {
		// padding: 30rpx;
		background-color: #F1F7F7;
		// min-height: 160vh;

		.user-info {
			display: flex;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			// margin-bottom: 5rpx;

			.avatar-container {
				margin-right: 30rpx;

				.avatar {
					// 2寸照片的宽、高
					// width: 200px;
					// height: 280px;
					// 1寸照片的宽、高
					width: 99px;
					height: 99px;
					// border-radius: 50%;
					background-color: #d9d9d9;
					border: 2rpx solid #f0f0f0;
				}
			}

			.info-main {
				flex: 1;

				.name-line {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;

					.name {
						font-size: 36rpx;
						font-weight: bold;
						color: #333;
						margin-right: 20rpx;
					}

					.gender {
						font-size: 32rpx;
						color: #03B8CD;
						background-color: #f0f7ff;
						padding: 4rpx 15rpx;
						border-radius: 20rpx;
					}
				}

				.meta-info {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #666;
					margin-bottom: 30rpx;

					text {
						margin-right: 15rpx;

						&:last-child {
							margin-right: 0;
						}
					}
				}

				.contact-info {
					.phone {
						// display: block;
						font-size: 26rpx;
						color: #666;
						// margin-bottom: 8rpx;
						margin-right: 10px;

						&:last-child {

							margin-bottom: 0;
						}
					}
				}
			}
		}
		
		.workSection {
			display: flex;
			justify-content: space-between;
		}

		.section {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30rpx;

			.section-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;
				// border-bottom: 1rpx solid #f0f0f0;			


				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}

				.status {
					font-size: 32rpx;
					color: #03B8CD;
				}
			}



			.section-content {
				
				.intention-item {
					display: flex;
					font-size: 28rpx;
					color: #666;
					margin-bottom: 15rpx;					
	

					.label {
						color: #333;
						font-weight: bold;
						margin-right: 10rpx;
					}
				}


				.intro-text {
					font-size: 28rpx;
					color: #666;
					line-height: 1.6;

					&.collapsed {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
					}
				}

				.expand-btn {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					color: #2979ff;
					font-size: 26rpx;
					margin-top: 15rpx;

					.u-icon {
						margin-left: 8rpx;
					}
				}
			}

			// 个人证书样式
			.certificates {
				.cert-row {
					margin-bottom: 20rpx;
				}

				.cert-names {
					// flex 通过 flex-direction 改变排列样式
					display: flex;
					flex-direction: column;

					.cert-name {
						width: 48%;
						font-size: 26rpx;
						color: #666;
						text-align: center;
					}
				}
			}
		}

		// 岗位与时间
		.timeSection {
			margin: 10px 0;

			.title-name {
				margin-right: 20px;
			}
		}


		.button-group {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20rpx 30rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

			// 此样式主要为了适配wx小程序的按钮
			/deep/ .u-size-default {
				width: 150px;
			}

			.u-btn {
				flex: 1;

				&:first-child {
					margin-right: 20rpx;
				}
			}
		}
	}
</style>